<template>
  <div class="metacode-container">
    <fks-query-page
      :data="codeTable"
      :total="total"
      :tableName="LANG.METACODE_LIB"
      @query="getCodeList"
      @clear="clear"
      :pageSize.sync="pageSize"
      :currentPage.sync="currentPage"
      :page-sizes="[15, 20, 50, 100]"
      layout="total, sizes, prev, pager, next, jumper"
    >
      <template slot="singleSearch">
        <div class="single-searchBox">
          <fks-select
            v-model="search.type"
            class="single-searchBox-item"
            :placeholder="LANG.METACODE_TYPE"
            @change="getCodeList"
            clearable
          >
            <fks-option
              v-for="item in metaCodeType"
              :key="item.code"
              :label="item[$lang]"
              :value="Number(item.code)"
            ></fks-option>
          </fks-select>
          <fks-input
            class="single-searchBox-item"
            :placeholder="LANG.METACODE_NAME"
            v-model="search.name"
            @keyup.enter.native="getCodeList"
          >
            <fks-button
              slot="append"
              icon="fks-icon-search"
              @click="getCodeList"
            />
          </fks-input>

          ><fks-button icon="fks-icon-plus" type="primary" @click="handleAdd">
            {{ LANG.ADD }}
          </fks-button>
        </div>
      </template>
      <template>
        <fks-table-column type="index" align="center" width="50" label="#" />
        <fks-table-column
          :label="LANG.METACODE_NAME"
          prop="name"
          align="left"
        ></fks-table-column>
        <fks-table-column :label="LANG.METACODE_TYPE">
          <template slot-scope="scope">
            <div>
              {{ scope.row.type | transferEnum('metaCodeType') }}
            </div>
          </template>
        </fks-table-column>
        <fks-table-column
          :label="LANG.APPLY_OBJ"
          prop="encodeNameList"
          align="left"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span v-for="item in scope.row.encodeNameList" :key="item">
              <span>{{ item }}</span>
              <span
                v-if="
                  scope.row.encodeNameList.indexOf(item) !=
                  scope.row.encodeNameList.length - 1
                "
                >、</span
              >
            </span>
          </template>
        </fks-table-column>
        <fks-table-column :label="LANG.OPERATION" width="130" align="left">
          <template slot-scope="scope">
            <fks-button text @click="handleView(scope.row)">{{
              LANG.VIEW
            }}</fks-button>
            <fks-button
              text
              v-if="scope.row.encodeNameList.length == 0"
              @click="handleEdit(scope.row)"
              >{{ LANG.EDIT }}</fks-button
            >
            <fks-button
              dangerText
              v-if="scope.row.encodeNameList.length == 0"
              @click="handleDelete(scope.row)"
              >{{ LANG.DELETE }}</fks-button
            >
          </template>
        </fks-table-column>
      </template>
    </fks-query-page>
    <add-code
      v-if="codeDialogVisible"
      :visible.sync="codeDialogVisible"
      :type="type"
      :codeData="codeData"
      @closeAddCode="getCodeList"
    ></add-code>
  </div>
</template>
<script>
import AddCode from '../AddCode'
import { getCodeList, deleteCode } from '../api'
import { ENUM } from '@/store/State/stateTypes'
export default {
  name: 'CodeList',
  components: { AddCode },
  data() {
    return {
      pageSize: 15,
      currentPage: 1,
      total: 0,
      codeTable: [],
      search: {
        name: '',
        type: '',
        objName: ''
      },
      codeDialogVisible: false,
      codeData: {},
      type: 'add'
    }
  },
  computed: {
    metaCodeType() {
      return this.$store.state[ENUM].metaCodeType || []
    }
  },
  mounted() {
    this.getCodeList()
  },

  methods: {
    clear() {
      this.search.name = ''
      this.search.type = ''
      this.getCodeList()
    },
    getCodeList() {
      let params = {
        name: this.search.name,
        type: this.search.type,
        pageNum: this.currentPage,
        pageSize: this.pageSize
      }
      getCodeList(params)
        .then((res) => {
          if (res.status) {
            this.codeTable = res.data.content
            this.total = res.data.totalElements
          }
        })
        .catch((err) => {})
    },
    handleAdd() {
      this.type = 'add'
      this.codeDialogVisible = true
    },
    handleView(row) {
      this.type = 'view'
      this.codeData = row
      this.codeDialogVisible = true
    },
    handleEdit(row) {
      this.type = 'edit'
      this.codeData = row
      this.codeDialogVisible = true
    },
    handleDelete(row) {
      this.$confirm(this.LANG.DELETE_CONFIRM, {
        title: this.LANG.TIPS,
        type: 'warning',
        confirmButtonText: this.LANG.DELETE,
        cancelButtonText: this.LANG.CANCEL,
        confirmButtonClass: 'fks-button--danger',
        deleteMode: true,
        showClose: false
      })
        .then(() => {
          return deleteCode(row.id)
        })
        .then((res) => {
          if (res.status) {
            this.getCodeList()
            this.$message.success(this.LANG.DELETE_SUCCESS)
          }
        })
        .catch((err) => {})
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .fks-query-page {
  padding: 24px 0 0;
  .fks-query-pagebox {
    bottom: 0;
    right: 3px;
  }
}
.metacode-container {
  height: 100%;
}
</style>